<!DOCTYPE html>
<div th:replace="~{ backend/app :: layout ('博客列表', _, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" id="main">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-12 d-flex justify-content-between">
                        <h1>博客列表</h1>
                        <a href="/backend/blog/add">创建新博客</a>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <form method="get" class="form-inline">
                                    <div class="input-group" style="width: 300px;">
                                        <input type="text" name="keyword" class="form-control"
                                               placeholder="搜索博客标题..." th:value="${keyword}">
                                        <div class="input-group-append">
                                            <button type="submit" class="btn btn-default">
                                                <i class="fas fa-search"></i>
                                            </button>
                                            <a th:if="${!#strings.isEmpty(keyword)}" href="/backend/blog"
                                               class="btn btn-default"
                                               title="清除搜索条件">
                                                <i class="fas fa-times"></i>
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Cover</th>
                                        <th>Title</th>
                                        <th>CreatedAt</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody th:each="blog:${page.getContent()}">
                                    <tr>
                                        <th th:text="${blog.id}">blog.id</th>
                                        <td>
                                            <img th:if="${blog.cover}" th:src="${blog.cover}"
                                                 alt="封面图" style="max-width: 80px; max-height: 60px; object-fit: cover; cursor: pointer" class="preview-image">
                                            <span th:unless="${blog.cover}" class="text-muted">无封面图</span>
                                        </td>
                                        <td><a th:href="@{'/blog/' + ${blog.id}}" target="_blank" th:text="${blog.title}">blog.title</a></td>
                                        <td th:text="${#temporals.format(blog.created_at, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                        <td class="center">
                                            <a href="#" th:href="@{'/backend/blog/edit/' + ${blog.id}}" class="text-sm">
                                                <i class="fas fa-edit"></i>
                                                Edit
                                            </a>
                                            <a class="text-sm pl-3" href="/backend/blog/delete/id" th:href="@{'/backend/blog/delete/' + ${blog.id}}">
                                                <i class="fas fa-trash"></i>
                                                Remove
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                        <div id="pagination-container" class="pt-1">
                            <p class="text-muted p-1">当前第 [[${page.getNumber()+1}]] 页，总计 [[${page.getTotalPages()}]] 页，共 [[${page.getTotalElements()}]] 条记录</p>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item" th:if="${page.hasPrevious()}">
                                        <a class="page-link" href="#" th:href="${'/backend/blog?page=' + page.getNumber() + (#strings.isEmpty(keyword) ? '' : '&keyword=' + keyword)}">Previous</a>
                                    </li>
                                    <li th:class="${currentPageNumber == page.getNumber() + 1 ? 'page-item active' : 'page-item'}" class="page-item"
                                        th:each="currentPageNumber:${#numbers.sequence(1, page.getTotalPages())}">
                                        <a class="page-link" th:href="${'/backend/blog?page=' + currentPageNumber + (#strings.isEmpty(keyword) ? '' : '&keyword=' + keyword)}" href="#" th:text="${currentPageNumber}">页码</a>
                                    </li>
                                    <li class="page-item" th:if="${page.hasNext()}">
                                        <a class="page-link" href="#" th:href="${'/backend/blog?page=' + (page.getNumber() + 2) + (#strings.isEmpty(keyword) ? '' : '&keyword=' + keyword)}">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 图片预览模态框 -->
        <div id="imageModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
       background-color: rgba(0,0,0,0.7); z-index: 1050; justify-content: center; align-items: center;
       opacity: 0; transition: opacity 0.3s ease;">
      <span class="close-btn" style="position: fixed; top: 20px; right: 30px; color: #f1f1f1; font-size: 30px;
            font-weight: bold; cursor: pointer; z-index: 1051;">&times;</span>
            <img id="modalImage" src="" alt="大图" style="max-width: 90%; max-height: 90%; object-fit: contain;
           transform: scale(0.9); opacity: 0; transition: all 0.3s ease;">
        </div>
    </div>

    <script id="js">
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            const closeBtn = modal.querySelector('.close-btn');

            function showModal() {
                modal.style.display = 'flex';
                // 触发重排后再添加opacity，确保transition生效
                setTimeout(() => {
                    modal.style.opacity = '1';
                    modalImg.style.opacity = '1';
                    modalImg.style.transform = 'scale(1)';
                }, 10);
            }

            function hideModal() {
                modal.style.opacity = '0';
                modalImg.style.opacity = '0';
                modalImg.style.transform = 'scale(0.9)';
                // 等待过渡效果完成后再隐藏modal
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 300);
            }

            document.querySelectorAll('.preview-image').forEach(img => {
                img.onclick = function() {
                    modalImg.src = this.src;
                    showModal();
                }
            });

            closeBtn.onclick = hideModal;

            modal.onclick = function(e) {
                if (e.target === modal) {
                    hideModal();
                }
            }

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && modal.style.display === 'flex') {
                    hideModal();
                }
            });
        });
    </script>

    <!-- /.content-wrapper -->
</div>

